
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  TouchableOpacity,
  Alert
} from 'react-native';
const Dimensions = require('Dimensions')
const { width } = Dimensions.get('window');

export default class Login extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
      userName: '',
      passWorld: '',
    };
  }
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <View style={styles.title}>
          <Text style={{ color: '#000', fontSize: 23 }}>登录</Text>
        </View>
        <TextInput style={styles.InputStyle} placeholder={'请输入用户名'} value={this.state.userName} 
        onChangeText={
          (text) => {
            this.setState({ userName: text })
          }
        } />
        <TextInput style={styles.InputStyle} placeholder={'请输入密码'} secureTextEntry={true} value={this.state.passWorld}
          onChangeText={(text) => {
            this.setState({ passWorld: text })
          }}
        />
        <TouchableOpacity style={styles.loginBtnStyle} onPress={() => {
          let { userName, passWorld } = this.state;
          if (userName == 'admin' && passWorld == 'admin') {
            navigate('Home',{});
          } else {
            Alert.alert('登录失败','帐号或密码错误，请重新输入')
            this.setState({
              passWorld:''
            })
          }
        }}>
          <Text style={{ color: 'white' }}>登录</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.visitorLoginBtnStyle}
          onPress={()=>{
            navigate('Home', {});
          }}
        >
          <Text style={{ color: 'white' }}>游客登录</Text>
        </TouchableOpacity>
        <View style={styles.operatorStyle}>
          <Text>新用户</Text>
          <Text>忘记密码</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#E8E8E8',
    marginTop: 10,
    flexDirection: 'column',
    alignItems: 'center',
  },
  title: {
    marginTop: 10,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 60,
  },
  InputStyle: {
    height: 38,
    backgroundColor: 'white',
    marginBottom: 2,
    textAlign: 'center',
    width: width,
  },
  visitorLoginBtnStyle: {

    height: 35,
    width: width * 0.9,
    backgroundColor: 'blue',
    marginBottom: 20,
    marginTop: 10,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8
  },
  loginBtnStyle: {
    height: 35,
    width: width * 0.9,
    backgroundColor: 'blue',
    marginTop: 40,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8
  },
  operatorStyle: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: width * 0.8,
    position: 'absolute',
    bottom: 30,
  }
});